<template>
  <div class="list">
    <header>
      <van-tabs v-model="active">
        <van-tab title="待提货"> </van-tab>
        <van-tab title="在途"></van-tab>
        <van-tab title="已完成"></van-tab>
      </van-tabs>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <van-tabbar v-model="active" @change="changeTab">
        <van-tabbar-item name="home" icon="home-o">任务</van-tabbar-item>
        <van-tabbar-item name="search" icon="bell">消息</van-tabbar-item>
        <van-tabbar-item
          name="friends"
          icon="f 
        riends-o"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </footer>
  </div>
</template>
<script>
export default {
  name: "MissonList",
  data() {
    return {
      active: 0,
    };
  },
  created() {},
  computed: {},
  methods: {
    changeTab() {
      if (this.active == 1) {
        this.$router.push("/task");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
header {
  width: 375px;
  height: 93px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.van-tabs {
  padding-top: 43px;
  width: 200px;
  height: 93px;
  position: fixed;
  top: 0px;
  left: 30px;
  z-index: 999;
  .van-nav-bar {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 25px;
    color: #000;
    /deep/.van-nav-bar__title {
      font-weight: 700;
    }
  }
}
main {
  margin-top: 93px;
  margin-bottom: 84px;
  height: 490px;
  overflow: auto;
}
footer {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  padding-bottom: 34px;
  width: 100%;
  height: 84px;
  background-color: #fff;
  .van-tabbar {
    width: 100%;
    height: 48px;
    bottom: 34px;
    &/deep/.van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
      border-bottom: 0;
    }
  }
}
</style>
